<script setup lang="ts">
import {ref} from "vue"
import {getJobListApi, createdJobApi, updatedJobApi, removeJobApi} from "@/apps/admin/api/administer/job";
import {useHttpPagingResult} from "@/hooks/http";
import {TableColumn} from "@/components/AppTable/TableType";
import {usePopupForm} from "@/components/FunctionComponents";

const where = ref({})

/**
 * hook获取数据
 */
const {pagination, list, loading, getRequestData} = useHttpPagingResult(function (query) {
  return getJobListApi({...query, ...where.value});
})

/**
 * 表格配置
 */
const columns: TableColumn[] = [
  {prop: "id", label: "id", minWidth: 100, fixed: "left"},
  {prop: "name", label: "职位名称", minWidth: 150, fixed: "left"},
  {type: "action", label: "操作", width: 100, fixed: "left"},
  {prop: "remarks", label: "备注信息", minWidth: 180},
  {prop: "status", label: "状态", type: "status", minWidth: 120},
  {prop: "sort", label: "排序", minWidth: 80},
  {prop: "created_at", label: "创建时间", type: "timestramp", minWidth: 170},
  {prop: "updated_at", label: "最后编辑", type: "timestramp", minWidth: 170}
]

/**
 * 操作
 * @param action
 * @param row
 */
function actionHander(action: string, row: any) {
  if (action === 'remove') {
    removeJobApi(row.id).then(result => {
      if (result.code === 200) {
        getRequestData()
      }
    })
  } else if (action === 'update') {
    usePopupForm({
      api: updatedJobApi,
      query: {id: row.id},
      onSuccess: getRequestData,
      width: '460px'
    })
  }
}

/**
 * 添加职位
 */
async function createdJob() {
  usePopupForm({
    api: createdJobApi,
    onSuccess: getRequestData,
    width: '460px'
  })
}
</script>
<template>
  <div>
    <data-card title="职位管理">
      <template #right>
        <el-space>
          <el-button size="small" type="primary" @click="createdJob">添加</el-button>
        </el-space>
      </template>
      <div class="app-margin-top-interval">
        <app-table height="calc(var(--ach) - 130px)" :data="list" :columns :pagination :loading @action="actionHander" @reload="getRequestData"></app-table>
      </div>
    </data-card>
  </div>
</template>